<template>
  <div class="flex-1 w-0 flex justify-end items-center mr-[6px]" :class="class">
    <pcdd-ball :num="balls[0]"></pcdd-ball>
    <span class="text-[14px] mx-[6px]">+</span>
    <pcdd-ball :num="balls[1]"></pcdd-ball>
    <span class="text-[14px] mx-[6px]">+</span>
    <pcdd-ball :num="balls[2]"></pcdd-ball>
    <span class="text-[14px] mx-[6px]">=</span>
    <pcdd-ball :num="codeNumSum"></pcdd-ball>
  </div>
</template>
<script setup lang="ts">
import pcddBall from "../ball/pcdd-ball.vue";

defineProps({
  class: {
    type: String,
    default: ""
  }
});
const balls = ref([0, 1, 2]);
const codeNumSum = computed(() => {
  let sum = 0;
  balls.value.forEach(item => {
    sum += Number(item);
  });
  return sum;
});
function getRandomNumbers() {
  const numbers = Array.from({ length: 10 }, (_, i) => i); // 创建包含 0 到 9 的数组
  const result = [];

  for (let i = 0; i < 3; i++) {
    // 循环 5 次
    const randomIndex = Math.floor(Math.random() * numbers.length);
    result.push(numbers.splice(randomIndex, 1)[0]); // 从数组中取出一个随机数并添加到结果中
  }
  return result;
}
let timer: any = null;
onMounted(() => {
  timer = setInterval(() => {
    balls.value = getRandomNumbers();
  }, 500);
});
onUnmounted(() => {
  clearInterval(timer);
});
</script>
